<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no"
          charset="UTF-8"/>
	<title>充值</title>
	<style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none
        }
        body {
            /*background-color: #EE9611;      #4acbb5*/
            position: relative;
        }
        .main{
        	width: 90%;
        	margin: 0 5%;
        }
        .phoneNumber{
        	width: 100%;
        	height: 50px;
        	margin-top: 40px;
        	background-color: #f4f4f4;
        	border: 1px solid #f1f1f1;
        	text-indent: 15px;
        }
        .recharge{
        	width: 100%;
        	height: 80px;
        	margin-top: 15px;
        	margin-bottom: 20px;
        }
        .recharge>div{
			width: 30%;
        	height: 80px;
			float: left;
			text-align: center;
			border: 2px solid #4acbb5;
			border-radius:  4px;
			box-sizing: border-box;
			margin-left: 5%;
        }
        .recharge>div:first-child{
			margin: 0 !important;
        }
        .boxRecharge>p{    
        	margin-top: 10px;
        	font-size: 18px;
        	color: #393939;
        }
        .boxRecharge>span{
        	font-size: 14px;
	    	-webkit-transform: scale(0.6,0.6);
		    -moz-transform: scale(0.6,0.6);
		    -o-transform: scale(0.6,0.6);
		    transform: scale(0.6,0.6);
        	color: #4acbb5;
		    display:block;
        }
        .boxRecharge>label{
        	line-height: 30px;
        	font-size: 14px;
        	color: #4acbb5;
		    display: block;
		    margin-top: -12px;
        }
        .active{
        	background-color: #4acbb5;
        }
        .active>p , .active>span , .active>label{
        	color: #fff !important;
        }
        .phoneBill{
        	width: 100%;
        	height: 30px;
        }
        .phoneBill>label:first-child{
        	color: #a5a5a5;
        	float: left;
        }
        .phoneBill>label:nth-child(2){
        	color: #ff3237;
        	float: right;
        }
        .total{
        	width: 100%;
        	height: 30px;
        }
        .total>label:first-child{
        	color: #a5a5a5;
        	float: left;
        }
        .total>label:nth-child(2){
        	color: #3f3f3f;
        	float: right;
        }
        button{
        	margin: 30px 0 40px;
        	width: 100%;
        	height: 50px;
        	background-color: #ffb22e;
        	border: 1px solid #ffb22e;
        	font-size: 18px;
        	color: #fff;
        	letter-spacing: 5px;
        }
        .segmentation{
        	width: 100%;
        	height: 5px;
        	background-color: #f7f7f7;
        	border: 1px solid #f7f7f7;
        }
        .remark{
        	color: #939393;
        	font-size: 12px;
        	margin-top: 30px;
        	line-height: 20px;
        }
    </style>
</head>
<body>
	<div class="main">
		<input type="text" id="phoneNumber" class="phoneNumber" onchange="checkPhone(this.value)" placeholder="输入充值号码">

		<div class="recharge">
			<div class="boxRecharge" onclick="chooseThis(1);">
				<p>30元</p>
				<span>优惠价</span>
				<label>29.94元</label>
			</div>
			<div class="boxRecharge" onclick="chooseThis(2);">
				<p>50元</p>
				<span>优惠价</span>
				<label>49.90元</label>
			</div>
			<div class="boxRecharge active" onclick="chooseThis(3);">
				<p>100元</p>
				<span>优惠价</span>
				<label>99.80元</label>
			</div>
		</div>

		<div class="phoneBill">
			<label>话费券</label>
			<label>-￥4.00  <input name="Fruit" type="radio" checked="checked" value="" /></label> 
		</div>
		<div class="total">
			<label>合计</label>
			<label id="totalMoney">￥95.80</label> 
		</div>

		<button onclick="submitData()">提交</button>

		<div class="segmentation"></div>

		<div class="remark">
			<p>温馨提示：</p>
			<p>1、不支持携号转网号码充值</p>
			<p>2、话费24小时内到账</p>
			<p>3、客服电话 : 400-100-100</p>
		</div>

	</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
		let Discount = 400;

		function checkPhone(value){
			let flag = true;
			let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

			if(!reg.test(value)){
				alert("请输入正确的充值号码");
				flag = false;
			}
			return flag;
		}


		function chooseThis(num){
			$(".boxRecharge").removeClass("active");
			$(".boxRecharge").eq(num-1).addClass("active");

			if(num == 1){
				$(".phoneBill").css("display","none")
				$("#totalMoney").html("29.94");
			}else if(num == 2){
				$(".phoneBill").css("display","none")
				$("#totalMoney").html("49.90");
			}else if(num == 3){
				$(".phoneBill").css("display","block")
				let money = (9980 - Discount)/100;
				$("#totalMoney").html(money);
			}
		}

		function submitData(){
			let phone = $("#phoneNumber").val();
			if(phone != ""){
				if(checkPhone(phone)){
					console.log(111);
				}
			}else{
				alert("充值号码不可为空")
			}
		}
</script>
</html>